<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-27 15:42:59
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { whManagerBsTbParkGridPatrolRecordGetPageUsingPost } from '@/genapi/wh';
import { useUserStore } from '@/stores/user';

defineOptions({ name: 'Inspection' });

const router = useRouter();

const userStore = useUserStore();

const tabValue = ref('1');

const articleList = ref([
	// {
	// 	title: '2条执行记录',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	patrolStatus: '1',
	// },
	// {
	// 	title: '未执行',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '0',
	// },
	// {
	// 	title: '未执行',
	// 	time: '20240年2月2日 08:00~09:00',
	// 	status: '0',
	// },
]);

function inspectionClick(item) {
	if (item.patrolStatus === '0') {
    router.replace({
        path: '/home/execut',
        query: item
    })
		// router.replace('/home/execut');
	} else {
    router.replace({
        path: '/home/inspectionFinish',
        query: item
    })
		// router.replace('/home/inspectionFinish');
	}
}
const getInspectData = () => {
  whManagerBsTbParkGridPatrolRecordGetPageUsingPost({
    current:'1',
    size:1000
  }).then(res => {
    for(let i = 0; i<res.data?.records?.length; i++){
      articleList.value.push(res.data?.records[i])
    }
  })
}
onMounted(() => {
  getInspectData()
})
</script>

<template>
	<div class="company">
		<div class="TaskListContent">
			<div
				class="articleItem"
				v-for="(item, i) in articleList"
				:key="i"
				mb-2
				@click="inspectionClick(item)"
			>
				<div class="articleDetails">
					<div class="articleLabel">
						巡查任务 |
						<span class="articleTitle" :style="{ color: item.patrolStatus === '0' ? '#9FB3C6' : '#303133' }">{{
							item.patrolStatus === '0'? '未执行':`${item.recordNum}条执行记录`
						}}</span>
					</div>
					<span class="timeStamp" v-if="item.patrolActualEndTime">实施时间：{{ item.patrolActualEndTime }}</span>
				</div>
				<img class="taskStatus" v-if="item.patrolStatus === '1'" src="../assets/finish.png" />
				<img class="taskStatusStart" v-if="item.patrolStatus === '0'" src="../assets/start.png" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.company {
	height: 100%;
	width: 100%;
	padding: 0px 20px;
	background-color: #ffffff;
	.TaskListContent {
		padding-top: 20px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.articleItem {
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: space-between;
			background-color: #f9fafd;
			padding: 10px 10px;
			font-size: 14px;
			.articleDetails {
				width: 80%;
			}
			.articleLabel {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
				text-wrap: nowrap;
				color: #4691d6;
				font-weight: 600;
				span {
					color: #000;
					font-weight: 300;
				}
			}
			.timeStamp {
				font-size: 11px;
				font-weight: 600;
				color: #9699a1;
			}
			.taskStatus {
				width: 40px;
				height: 19px;
			}
			.taskStatusStart {
				width: 46px;
				height: 23px;
			}
		}
	}
}
</style>
